<template>
  <div class="screening-analysis">
    <div class="page-header">
      <h2>排片分析</h2>
      <div class="filter-section">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDateChange"
        />
      </div>
    </div>

    <el-row :gutter="20" class="chart-container">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>日排片场次分布</span>
            </div>
          </template>
          <div class="chart" ref="screeningChart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>影院排片占比</span>
            </div>
          </template>
          <div class="chart" ref="theaterChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-container">
      <el-col :span="24">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>排片趋势分析</span>
            </div>
          </template>
          <div class="chart" ref="trendChart"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const dateRange = ref([])
const screeningChart = ref(null)
const theaterChart = ref(null)
const trendChart = ref(null)

const handleDateChange = () => {
  // 处理日期变化，重新加载数据
  loadScreeningData()
}

const loadScreeningData = async () => {
  try {
    // TODO: 调用后端API获取排片数据
    initCharts()
  } catch (error) {
    console.error('加载排片数据失败：', error)
  }
}

const initCharts = () => {
  // 初始化排片场次分布图表
  const screeningChartInstance = echarts.init(screeningChart.value)
  screeningChartInstance.setOption({
    title: { text: '日排片场次分布' },
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: ['00:00', '06:00', '12:00', '18:00', '23:59'] },
    yAxis: { type: 'value' },
    series: [{
      data: [10, 30, 50, 80, 20],
      type: 'line',
      smooth: true
    }]
  })

  // 初始化影院排片占比图表
  const theaterChartInstance = echarts.init(theaterChart.value)
  theaterChartInstance.setOption({
    title: { text: '影院排片占比' },
    tooltip: { trigger: 'item' },
    series: [{
      type: 'pie',
      radius: '50%',
      data: [
        { value: 35, name: '万达影城' },
        { value: 30, name: '大地影院' },
        { value: 25, name: '金逸影城' },
        { value: 20, name: '其他影院' }
      ]
    }]
  })

  // 初始化排片趋势图表
  const trendChartInstance = echarts.init(trendChart.value)
  trendChartInstance.setOption({
    title: { text: '排片趋势分析' },
    tooltip: { trigger: 'axis' },
    legend: { data: ['排片场次', '上座率'] },
    xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
    yAxis: [
      { type: 'value', name: '场次' },
      { type: 'value', name: '上座率', max: 100, axisLabel: { formatter: '{value}%' } }
    ],
    series: [
      {
        name: '排片场次',
        type: 'bar',
        data: [120, 132, 101, 134, 190, 230, 210]
      },
      {
        name: '上座率',
        type: 'line',
        yAxisIndex: 1,
        data: [20, 32, 41, 34, 60, 70, 65]
      }
    ]
  })

  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', () => {
    screeningChartInstance.resize()
    theaterChartInstance.resize()
    trendChartInstance.resize()
  })
}

onMounted(() => {
  loadScreeningData()
})
</script>

<style scoped>
.screening-analysis {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  margin-bottom: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.chart {
  height: 400px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>